<template>
  <div class="home-module__topic container">
    <view class="topic-header">
      <view class="title u-line-1">{{ datas.title }}</view>
      <view class="more" @click="goMore">更多<u-icon name="arrow-right"></u-icon></view>
    </view>

    <!-- 宫格 -->
    <div
      v-if="datas.arrange == 1 || datas.arrange == 2"
      :class="[datas.arrange == 1 ? 'list' : 'gongge']"
      class="topic-list"
    >
      <div v-for="(item, index) in datas.list" :key="index" class="item">
        <div class="picture" @click="goTopic(item.id)">
          <edu-image :src="item.cover_url" width="100%" height="100%"></edu-image>
        </div>
        <div class="content">
          <div class="title" @click="goTopic(item.id)">{{ item.title }}</div>
          <div class="parallel">
            <u-icon
              name="eye"
              :label="item.read_count"
              size="22rpx"
              color="#B7BAC1"
              label-size="22rpx"
              label-color="#B7BAC1"
            ></u-icon>
            <u-line color="#E4E7ED" length="16rpx" direction="col" margin="0rpx 10rpx"></u-line>
            <div class="time">{{ item.publish_time | timeFrom }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 滚动 -->
    <div v-else-if="datas.arrange == 3" class="topic-list scroll">
      <swiper
        :display-multiple-items="displayMultipleItems"
        next-margin="39px"
        class="topic-swiper"
      >
        <swiper-item v-for="(item, index) in datas.list" :key="index">
          <div class="item" :class="[{ 'item-w': displayMultipleItems == 1 }]">
            <div class="picture" @click="goTopic(item.id)">
              <edu-image :src="item.cover_url" width="100%" height="100%"></edu-image>
            </div>
            <div class="content">
              <div class="title" @click="goTopic(item.id)">{{ item.title }}</div>
              <div class="parallel">
                <u-icon
                  name="eye"
                  :label="item.read_count"
                  size="22rpx"
                  color="#B7BAC1"
                  label-size="22rpx"
                  label-color="#B7BAC1"
                ></u-icon>
                <u-line color="#E4E7ED" length="16rpx" direction="col" margin="0rpx 10rpx"></u-line>
                <div class="time">{{ item.publish_time | timeFrom }}</div>
              </div>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Topic',
  props: {
    datas: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  computed: {
    displayMultipleItems() {
      if (this.datas.list.length < 2) return 1
      return 2
    },
  },
  methods: {
    // 跳转更多
    goMore() {
      this.$u.route('pageFound/topic/index')
    },
    // 跳转讲师
    goTopic(id) {
      if (id == 0) return
      this.$edu.route('pageFound/topic/details', {
        id: id,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.home-module__topic {
  margin-bottom: 56rpx;
  .topic-header {
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    .title {
      font-size: 34rpx;
      font-weight: bold;
      color: $edu-main-color;
      line-height: 48rpx;
      flex: 1;
      min-width: 0;
      margin-right: 30rpx;
    }
    .more {
      font-size: 24rpx;
      font-weight: 400;
      color: #888888;
      line-height: 34rpx;
    }
  }
  .topic-list {
    .item {
      .picture {
        overflow: hidden;
      }
      .content {
        .title {
          font-size: 30rpx;
          font-weight: 500;
          color: $edu-main-color;
          line-height: 40rpx;
        }
        .firmware {
          font-size: 24rpx;
          font-weight: 400;
          color: $edu-tips-color;
          line-height: 34rpx;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box; // 弹性伸缩盒
          -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
          -webkit-line-clamp: 3;
        }
        .parallel {
          display: flex;
          align-items: center;
          line-height: 1;
          .time {
            font-size: 22rpx;
            font-weight: 400;
            color: #b7bac1;
          }
        }
      }
    }
    &.list {
      display: grid;
      margin: 32rpx 30rpx 0;
      padding: 0 22rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
      border-radius: 20rpx;
      .item {
        grid-column: span 1 / span 1;
        padding: 32rpx 0;
        display: flex;
        flex-direction: row-reverse;
        border-bottom: 1rpx solid #f7f7f7;
        .picture {
          width: 256rpx;
          height: 142rpx;
          border-radius: 16rpx;
        }
        .content {
          margin-right: 24rpx;
          flex: 1;
          min-width: 0;
          .title {
            height: 80rpx;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box; // 弹性伸缩盒
            -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
            -webkit-line-clamp: 2;
          }
          .parallel {
            margin-top: 34rpx;
          }
        }
      }
    }
    &.gongge {
      margin: 32rpx 30rpx 0;
      padding: 0 22rpx;
      display: grid;
      padding: 28rpx 22rpx;
      grid-gap: 28rpx 22rpx;
      grid-template-columns: repeat(2, minmax(0px, 1fr));
      background: #ffffff;
      box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
      border-radius: 20rpx;
      .item {
        grid-column: span 1 / span 1;
        .picture {
          height: 172rpx;
          border-radius: 16rpx;
        }
        .content {
          margin-top: 16rpx;
          .title {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .parallel {
            margin-top: 16rpx;
          }
        }
      }
    }
    &.scroll {
      margin-top: 32rpx;
      padding-left: 20rpx;
      .topic-swiper {
        height: 268rpx;
      }
      .item {
        margin: 0 10rpx;
        &.item-w {
          width: 306rpx;
        }
        .picture {
          height: 172rpx;
          border-radius: 16rpx;
        }
        .content {
          margin-top: 16rpx;
          .title {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .parallel {
            margin-top: 16rpx;
          }
        }
      }
    }
  }
}
</style>
